<template>
  <el-config-provider :locale="localLanguage">
  <!--       引入 Watermark-->
  <Watermark :gap="gap" :text="text" :fontSize="fontSize" :color="color">
    <el-scrollbar height="100vh" ref="scroll" v-if="mode != 'horizontal'">
      <router-view></router-view>
    </el-scrollbar>
      <router-view v-else></router-view>
    </Watermark>
  </el-config-provider>
</template>

<script setup>
import Watermark from '@/components/Watermark/index.vue'
  import { onMounted, computed, ref, watch } from 'vue';
  import { useStore } from 'vuex';
  import {ElConfigProvider} from "element-plus";
  import {ElScrollbar} from "element-plus";

  import i18n from '@/locales';
  import { useRouter } from 'vue-router';
  import { themeConfig } from '@/config/theme';
  const locale = i18n.global.locale;
  const { themeOptions } = themeConfig;
  const store = useStore();
  const text=ref('月下星辰YUEXIA');
  const gap=ref(1.5);
  const fontSize=ref('15');
  const color=ref('rgba(125,156,225,0.58)');
  const localLanguage = computed(() => {
//const isDev = process.env.NODE_ENV === 'development';
//const isDev = process.env.NODE_ENV === 'production';
    console.log('-------------'+process.env.NODE_ENV+'--------------------')
    // if (isDev) return i18n.global.messages.value[locale.value];
    // else return i18n.global.messages[locale];
    return i18n.global.messages.value[locale.value];
  });
  const scroll = ref(null);
  const mode = computed(() => {
    return store.getters['setting/mode'];
  });
  const router = useRouter();
  onMounted(() => {
    themColor()
    changeBodyWidth();
    window.addEventListener('resize', changeResize);
  });

  // watch(
  //   () => router.currentRoute.value,
  //   () => {
  //     scroll.value.setScrollTop(0);
  //   }
  // );
  const theme = computed(() => {
    return store.getters['setting/theme'];
  });

  const primaryBgColor = computed(() => {
    return themeOptions[theme.value].primary;
  });
  const themColor=()=>{
   
  }
  const changeBodyWidth = () => {
    const flag = document.body.getBoundingClientRect().width - 1 < 992;
    store.dispatch('setting/changeMobile', flag);
  };

  const changeResize = () => {
    changeBodyWidth();
  };
</script>

<style lang="scss">
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    font-size: $base-font-size-default;
    color: #2c3e50;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
</style>
<style>
.el-table .el-table__cell{
  padding: 4px 0 !important;
}

.el-dropdown-link:focus {
    outline: none !important;
  }
.queryButton{
  margin-left: 20px;
}
 /*.el-sub-menu:hover {
  background-color: var(--el-color-primary-light-9) !important;  
}*/
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.mb8{
  height: 25px;
  margin-right: 0px !important;
}
.el-drawer__header{
  border: 1px #dcdfe6 solid;
  margin-bottom: 10px !important;
}
.el-main{
  top: 120px !important;
  padding: 10px 10px 10px 10px !important;
}
.span_a{
  color: blue;
   cursor: pointer;
}
.app_content {
  margin-top: 30px !important;
  margin-left: 0px !important;
  padding: 0px 10px;
}
</style>